<!-- 页面 -->
<template>
    <div class="xia">
        <div :class="co == '0' ? 'red' : ''" class="xiade" @click="shou">
            <van-icon size="1.875rem" name="wap-home-o" /><br>
            首页
        </div>
        <div :class="co == '1' ? 'red' : ''" class="xiade" @click="fen">
            <van-icon size="1.875rem" name="idcard" /><br>
            课程
        </div>
        <div :class="co == '2' ? 'red' : ''" class="xiade" @click="gou">
            <van-icon size="1.875rem" name="cart-o" /><br>
            约课记录
        </div>
        <div :class="co == '3' ? 'red' : ''" class="xiade" @click="lian">
            <van-icon size="1.875rem" name="user-o" /><br>
            练习
        </div>
        <div :class="co == '4' ? 'red' : ''" class="xiade" @click="wo">
            <van-icon size="1.875rem" name="user-o" /><br>
            我的
        </div>
    </div>
</template>
<!-- vue -->
<script>
export default {
    props: [
        'co'
    ],
    data() {
        return {
            // 声明的属性
        }
    },
    //生命周期函数
    mounted() {
        
    },
    // 调用方法
    methods: {
        shou() {
            this.$router.push('/shou')
        },
        fen() {
            this.$router.push('/ke')
        },
        gou() {
            this.$router.push('/yue')
        },
        lian() {
            this.$router.push('/lian')
        }
        ,
        wo() {
            this.$router.push('/dl')
        }
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.xia {
    width: 100%;
    height: 4.375rem;
    position: fixed;
    bottom: 0rem;
    background: white;
}

.xiade {
    width: 3.125rem;
    float: left;
    margin-left: 1.375rem;
    font-size: .625rem;
}

.red {
    color: red
}
</style>